<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟填报</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">

    <link href="css/zzsc.css" rel="stylesheet">
    <link href="css/maps.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/style.css">
    <script type="text/javascript" src="js/maps.js"></script>
    <script type="text/javascript" src="js/google.js"></script>

</head>
<body>
<style>
    a:hover{ text-decoration:underline;color: #FF5907; }
    * {
        margin: auto;
    }

    tr {
        text-align: center;
        margin: auto;
    }

    td {
        font-size: 15px;
        font-weight: bold;
        width: 100px;
        height: 50px;
    }

    p {
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
    }

    .s {
        padding-left: 20px;
    }

    h2 {
        text-align: center;
    }

    table {

        border-spacing: 0;

    }

    table,
    table tr td {
        border: 2px solid #ccc;
    }

    table tr td {
        padding: 5px 10px 5px ;
    }
</style>
<div id="app">
    <ul   class="nav">
        <li style="float: left;padding-left:320px " > <a style="font-size: 10px" href="#">会员权益</a></li>
        <li style="float: left;padding-left:10px " > <a style="font-size: 10px" href="#">文本比较</a></li>
        <li style="float: left;padding-left:10px " > <a style="font-size: 10px" href="#">在线代码</a></li>
        <li style="float: left;padding-left: 900px" ><a style="font-size: 10px" @click="location.href='./userUpdate.html'" >修改信息 </a>&nbsp;</li>
        <li style="float: left; padding-left: 10px" > <a style="font-size: 10px" href="#">| </a></li>
        <li style="float: left;padding-left: 10px" > <a style="font-size: 10px" @click="goOffline()">退出登录</a></li>



    </ul>
    <!-- 固定导航栏 -->

    <div class="container">
        <div class="row nav upnav">
            <div class="col-lg-4"><h1><div style="font-family: 'Arial';">志愿填报网</div></h1></div>
            <div class="col lg-4"></div>
        </div>
        <div class="content">
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <ul class="venus-menu">
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                <li  ><a href="#"><i class="icon-home"></i> <a href="index.html" style="font-weight: bold; color: rgb(57, 83, 131);">
                    首页
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-search"></i><a href="universities.html">
                    院校查找
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-android-hand"></i> <a href="majors.html">
                    模拟填报
                </a></a>
                    <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-ios-star-half"></i><a href="recommend.html">
                    志愿推荐
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-podium"></i><a href="#">
                    大学排行
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>
                <li><a href="#"><i class="icon ion-android-exit"></i><a href="http://localhost/" target="_blank" >
                    管理员入口
                </a></a></li><p style="display:none">
                Lorem ipsum dolor dit amet</p>
                </li>

                <p style="display:none">Lorem ipsum dolor dit amet</p>
                </li>
            </ul>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
            <p style="display:none">Lorem ipsum dolor dit amet</p>
        </div>
    </div>
    <div class="container">
        <br><br><br><br><br><br><h2>模拟志愿表</h2>
        <table  id="backViewTable" class="table table-hover table-sm table2excel">
            <tr id="1">
                <td>考生代码</td>
                <td colspan="2">{{users.sno}}</td>
                <td>姓名</td>
                <td><span>{{users.name}}</span></td>
                <td>科目组合</td>
                <td colspan="4">{{users.type}}</td>
                <td>高考总分</td>
                <td>{{users.score}}</td>
                <td></td>
                <td>全省排名</td>
                <td>{{users.ranks}}</td>

            </tr>
            <tr id="2">
                <td colspan="2">录取批次</td>
                <td>志愿号</td>
                <td colspan="2">院校名称</td>
                <td colspan="8">专业编号/名称</td>
                <td>是否服从调剂 </td>
                <td rowspan="9"></td>
            </tr>

            <tr id="3">
                <td rowspan="4">本科批</td>
                <td rowspan="2">第一批</td>
                <td contenteditable="true"></td>
                <td colspan="2" contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td><select style="width: 80px">
                    <option>是</option>
                    <option>否</option>
                </select></td>
            </tr>

            <tr id="4">
                <td contenteditable="true"></td>
                <td colspan="2" contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td><select style="width: 80px">
                    <option>是</option>
                    <option>否</option>
                </select></td>
            </tr>

            <tr id="5">
                <td rowspan="2">第二批</td>
                <td contenteditable="true"></td>
                <td colspan="2" contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td><select style="width: 80px">
                    <option>是</option>
                    <option>否</option>
                </select></td>
            </tr>

            <tr id="6">
                <td contenteditable="true"></td>
                <td colspan="2" contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td><select style="width: 80px">
                    <option>是</option>
                    <option>否</option>
                </select></td>
            </tr>

            <tr id="7">
                <td rowspan="4">专科批</td>
                <td rowspan="2">第一批</td>
                <td contenteditable="true"></td>
                <td colspan="2" contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td><select style="width: 80px">
                    <option>是</option>
                    <option>否</option>
                </select></td>
            </tr>

            <tr id="8">
                <td contenteditable="true"></td>
                <td colspan="2" contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td><select style="width: 80px">
                    <option>是</option>
                    <option>否</option>
                </select></td>
            </tr>

            <tr id="9">
                <td rowspan="2">第二批</td>
                <td contenteditable="true"></td>
                <td colspan="2" contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td><select style="width: 80px">
                    <option>是</option>
                    <option>否</option>
                </select></td>
            </tr>

            <tr id="10">
                <td contenteditable="true"></td>
                <td colspan="2" contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td contenteditable="true"></td>
                <td><select style="width: 80px">
                    <option>是</option>
                    <option>否</option>
                </select></td>

            </tr>
        </table>
        <button class="btn btn-primary btn-sm" onclick="tablesToExcel(['backViewTable'], ['ProductDay1'], 'TestBook.xls', 'Excel')">导出志愿表</button>

    </div>



    <!-- footer -->
    <div class="footer container">
        <div class="footertext">
            <div>联系电话: 123456789</div>
            <div>团队成员: 马秀坤 和理智 王贺 王乐斌 </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    const tablesToExcel = (function () {
        const uri = 'data:application/vnd.ms-excel;base64,'
            ,
            tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
                + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>'
                + '<Styles>'
                + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
                + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
                + '</Styles>'
                + '{worksheets}</Workbook>'
            , tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>'
            , tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>'
            , base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            }
            , format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                })
            };
        return function (tables, wsnames, wbname, appname) {
            let ctx = "";
            let workbookXML = "";
            let worksheetsXML = "";
            let rowsXML = "";

            for (let i = 0; i < tables.length; i++) {
                if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);

//              控制要导出的行数
                for (let j = 0; j < tables[i].rows.length; j++) {
                    rowsXML += '<Row>';

//                    控制导出的列数（在本例中，最后一列为button,导出的文件会出错，所以导出到倒数第二列
                    for (var k = 0; k < tables[i].rows[j].cells.length - 1; k++) {
                        var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
                        var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
                        var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
                        dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML;
                        var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
                        dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null;
                        ctx = {
                            attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : ''
                            ,
                            nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String'
                            ,
                            data: (dataFormula) ? '' : dataValue
                            ,
                            attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : ''
                        };
                        rowsXML += format(tmplCellXML, ctx);
                    }
                    rowsXML += '</Row>'
                }
                ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i};
                worksheetsXML += format(tmplWorksheetXML, ctx);
                rowsXML = "";
            }

            ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML};
            workbookXML = format(tmplWorkbookXML, ctx);

//          查看后台的打印输出
            console.log(workbookXML);

            const link = document.createElement("A");
            link.href = uri + base64(workbookXML);
            link.download = wbname || 'Workbook.xls';
            link.target = '_blank';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    })();
</script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            users:{},
            type:"",
            region: [],
            types:[],
            selectedType:[],
            text:'',
            showGroup:false,
            colleges: [],
            selectedCollege:[],
            recommended:[],

            collegess:[],
            page:1,
            rows:9,
            totalPage:0,
            totals:0,

            beforeRec:true,
            afterRec:false
        },
        computed:{
            searchResult() {
                if (this.text!=='') {
                    return this.colleges.filter(
                        item =>
                            item.indexOf(this.text) > -1,
                        this.showGroup=true,
                    );
                } else {
                    this.showGroup=false
                    return this.colleges;
                }
            }
        },
        methods:{
            goOffline(){
                const storage = window.localStorage;
                storage.setItem("online","off");
                storage.setItem("userid",'');
                storage.setItem("role","user")
                alert("登出成功, 点击进入登陆页面")
                location.href='login.html';
            },
            test(){
                console.log(this.users.score.toString())    //分数
                console.log(this.users.type.toString())     //选课类型
                console.log(this.region.toString())         //意愿地区
                console.log(this.selectedType.toString())   //意愿专业类型
                console.log(this.selectedCollege.toString())//理想大学
            },
            findUserById(id){
                axios.get("http://localhost:8080/users/getUsersById?id="+id).then((res)=>{
                    console.log(res.data)
                    this.users = res.data;
                });
            },
            queryAllTypes(){
                axios.get("http://localhost:8080/majors/queryAllTypes").then((res)=>{
                    console.log(res.data)
                    this.types = res.data;
                });
            },
            queryAllCollegesName(){
                axios.get("http://localhost:8080/colleges/queryAllName").then((res)=>{
                    this.colleges = res.data;
                });
            },
            setSelectedCollege(item){
                this.selectedCollege = item;
                this.text = '';
            },
            doRecommend(){
                axios.get("http://localhost:8080/users/getRecommend?score="+this.users.score+
                    "&type="+this.users.type+"&aimRegion="+this.region+"&aimMajor="
                    +this.selectedType+"&aimCollege="+this.selectedCollege).then((res)=>{
                    this.recommended = res.data;
                    console.log(this.recommended)
                });
                this.beforeRec = false;
                this.afterRec = true;
            },


            findAll(indexpage){
                if(indexpage) this.page = indexpage;
                const _this = this;
                axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                    console.log(res.data)
                    _this.collegess = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            findByTags(){
                const _this = this;
                console.log("page="+this.page+"&rows="+this.rows)
                axios.get("http://localhost:8080/colleges/findByPage?page="+this.page+"&rows="+this.rows).then((res)=>{
                    console.log(res.data)
                    console.log(location.href)
                    _this.collegess = res.data.colleges;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            }
        },
        created(){
            if(0){
                window.location='login.html';
            }else {
                console.log(window.localStorage.getItem("userid").toString());
                this.findUserById(window.localStorage.getItem("userid").toString());
                this.queryAllTypes();
                this.queryAllCollegesName();
                this.findAll();
                this.beforeRec=true;
                this.afterRec=false;
            }
        }
    });
</script>
